<template>
  <div class="StatisticsCareer">
    <wraptitle>
      <template v-slot:view-title>职业规划统计</template>
    </wraptitle>
    <div class="util">
      <div class="toolbar-wrap" v-if="roleid >= 3">
        <slot name="menutitle">班级：</slot>
        <el-select v-model="organization" clearable>
          <el-option
            v-for="item in organizations"
            :key="item.organization_id"
            :label="item.orgname"
            :value="item.organization_id"
          ></el-option>
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="SearchCareer"
        >搜索</el-button
      >
    </div>

    <div class="careerplan-table-wrap">
      <el-table
        :data="careerplanList"
        border
        stripe
        size="mini"
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="姓名"
          width="80"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="studentid"
          label="学号"
          width="100"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="userinfo.organization.orgname"
          label="班级"
          width="150"
          align="center"
        ></el-table-column>

        <el-table-column
          prop=""
          label="大一上"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 2">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大一下"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 3">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大二上"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 4">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大二下"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 5">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大三上"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 6">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大三下"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 7">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大四上"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 8">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="大四下"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.user_careerplan"
              :key="index"
            >
              <span v-if="item.timeslot_id === 9">{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="pagination" v-show="totalcount > 10">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pagesize"
        @current-change="pageChange"
        :current-page.sync="currentPage"
        :total="totalcount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import wraptitle from '@/components/content/WrapTitle'
import { getCareerPlanList } from '@/network/career'
import { getCareerPlanEnterprise } from '@/network/statistics'
import { getOrganization, getTimesLotList } from '@/network/index'

export default {
  data() {
    return {
      pagenow: 1,
      pagesize: 10,
      // 当前页
      currentPage: 1,
      // 总页数
      totalcount: 0,
      careerplanList: [],
      organizations: [],
      organization: '',
      disabled: true
    }
  },
  components: {
    wraptitle
  },
  computed: {
    ...mapGetters(['roleid'])
  },
  created() {
    this.getTimesLotList()
    this.getOrganization()
    this.getList()
  },
  methods: {
    getList() {
      let params = this.getParams()
      params.pagenow = this.pagenow
      getCareerPlanEnterprise(params).then(res => {
        this.careerplanList = res.data
        this.totalcount = res.totalcount
      })
    },

    // 获取参数
    getParams() {
      let params = {
        // realName: this.studentName,
        // student_id: this.studentId,
        organization_id: this.organization
        // timeslot_id: this.tim,
      }
      return params
    },

    // 点击搜索
    SearchCareer() {
      let params = this.getParams()
      this.currentPage = 1
      params.pagenow = 1
      params.pagesize = this.pagesize
      getCareerPlanEnterprise(params).then(res => {
        this.careerplanList = res.data
        this.totalcount = res.totalcount
      })
    },
    // 检测分页点击
    pageChange(currentPage) {
      this.pagenow = currentPage
      this.currentPage = currentPage
      this.getList()
    },

    getTimesLotList() {
      getTimesLotList().then(res => {
        this.timesLot = res.data
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
      })
    },
    getOrganization() {
      getOrganization().then(res => {
        this.organizations = res.data
      })
    },
    edit() {},
    under() {},
    // 数据处理部分
    formatStatus(value) {
      return value == 1 ? '已提交' : '待提交'
    },
    formatStudy: function(row, column) {
      return row.is_studymaster == true ? '是' : '否'
    }
  }
}
</script>

<style lang="scss">
.util {
  padding: 20px;
  display: flex;
  flex-direction: row;
}
</style>
